<template>
  <div class="render-view d-paner">
    <div class="d-contenter">
      <div class="render-title">
        <h3>模板生成器</h3>
      </div>
      <el-row>
        <el-col :span="12">
          <el-tabs v-model="activeTpl">
            <el-tab-pane label="模板代码" name="first">
              <Coder v-model="tpl" ref="tpl" :height="'560px'" language="html" />
            </el-tab-pane>
            <el-tab-pane label="配置数据" name="second">
              <Coder v-if="activeTpl === 'second'" v-model="data" ref="data" :height="'560px'" language="javascript" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="12">
          <el-tabs v-model="activeCode">
            <el-tab-pane label="生成结果" name="first">
              <Coder v-model="code" ref="code" :height="'560px'" language="html" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <div class="d-group-btns d-text-center d-bar-drawer">
      <button @click="handleRender" type="button" class="d-btn d-btn-primary">生成</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </div>
  </div>
</template>

<script>
import { parser } from '@daelui/dogjs/dist/components.js'
import template from '@daelui/dogjs/dist/libs/template'
import { Coder } from '@daelui/vdog/dist/coder.js'
import demo from './demo.js'

export default {
  components: {
    Coder
  },

  data () {
    return {
      activeTpl: 'first',
      activeCode: 'first',
      tpl: '',
      data: '{\n\n}',
      code: ''
    }
  },

  mounted () {
    this.tpl = demo.tpl
    this.data = demo.data
    this.handleRender()
  },

  methods: {
    // 执行渲染
    handleRender () {
      let data = parser.parse(this.data)
      if (typeof data === 'object') {
        this.renderTpl(data)
      }
    },
    // 渲染模板
    renderTpl (data) {
      this.code = template.render(this.tpl, data, {
        tagStart : '{%',
        tagEnd : '%}',
        isReplaceWrap: false
      })
      this.$refs.code.monacoEditor.setValue(this.code)
    }
  }
}
</script>

<style lang="less" scoped>
.render-view {
  width: 100%;
}
.render-btns {
  padding: 8px 0;
}
</style>

<style>
#webpack-dev-server-client-overlay {
  display: none;
}
</style>